<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ page import = "timesheet.model.*"%>
<%@ page import = "java.util.*"%>
<%@ page import = "org.json.JSONArray"%>
<%@ page import = "org.json.JSONObject"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Time line</title>
</head>
	<script src='/js/dhtmlxscheduler.js' type="text/javascript" charset="utf-8"></script>
	<script src='/js/dhtmlxscheduler_timeline.js' type="text/javascript" charset="utf-8"></script>
	<script src='/js/jquery-1.8.2.min.js' type="text/javascript" charset="utf-8"></script>
	<!--  <link rel="stylesheet" href="/css/dhtmlxscheduler_dhx_terrace.css" type="text/css" media="screen" title="no title"
	      charset="utf-8">
	<script src="/js/dhtmlxscheduler_dhx_terrace.js" type="text/javascript" charset="utf-8"></script>-->
	
	<link rel='stylesheet' type='text/css' href='/css/dhtmlxscheduler.css'>

<style type="text/css" media="screen">
	html, body{
		margin:0px;
		padding:0px;
		height:100%;
		overflow:hidden;
	}	
	.one_line{
		white-space:nowrap;
		overflow:hidden;
		padding-top:5px; padding-left:5px;
		text-align:left !important;
	}
</style>
<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
		<div class="dhx_cal_navline">
			<div class="dhx_cal_prev_button">&nbsp;</div>
			<div class="dhx_cal_next_button">&nbsp;</div>
			<div class="dhx_cal_today_button"></div>
			<div class="dhx_cal_date"></div>
			<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
			<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
			<div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>
			<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
		</div>
		<div class="dhx_cal_header">
		</div>
		<div class="dhx_cal_data">
		</div>		
	</div>
<body>
	<script type="text/javascript">
	    //scheduler.config.readonly = true;
	    scheduler.locale.labels.timeline_tab = "Timeline";
		scheduler.locale.labels.section_custom="Section";
		scheduler.locale.labels.section_project="Project";
		scheduler.locale.labels.section_greeting = 'Event ID';
		scheduler.config.details_on_create=true;
		scheduler.config.details_on_dblclick=true;
		scheduler.config.xml_date="%Y-%m-%d %H:%i";
		
		scheduler.config.default_date = "%j %M %Y (#%W)";
		
		
		//===============
		//Configuration
		//===============
		var sections=${userlist};
		scheduler.createTimelineView({
			name:	"timeline",
			x_unit:	"minute",
			x_date:	"%H:%i",
			x_step:	30,
			x_size: 24,
			x_start: 16,
			x_length:	48,
			y_unit:	sections,
			y_property:	"section_id",
			render:"bar"
		});
		
		var project = ${projectlist};
		
		//===============
		//Data loading
		//===============
		scheduler.config.lightbox.sections=[	
			{name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
			{name:"greeting", height: 23, map_to: "hidden", type: "template"},
			{name:"custom", height:23, type:"select", options:sections, map_to:"section_id"},
			{name:"project", height:23, type:"select", options:project, map_to:"project_id"},
			{name:"time", height:72, type:"time", map_to:"auto"}
		]
		var today = new Date();
		var yyyy = today.getFullYear();
		var dd = today.getDate();
		var mm = today.getMonth(); //January is 0!

		scheduler.config.xml_date="%Y-%m-%d %H:%i";
		scheduler.init('scheduler_here',new Date(yyyy,mm,dd),"day");
		var actions = ${actionlist};
		scheduler.parse(actions,"json");
		console.log(actions);
		
		scheduler.attachEvent("onConfirmedBeforeEventDelete", function(event_id,event_object){
		    //alert("delete");
		    //alert(event_object.text);
		    //cheduler.deleteEvent(event_id);
		    $.ajax({
					  type: "POST",
					  url: "/eventmanager",
					  data: {"idDb":event_object.hidden, "desc":event_object.text, "sect":event_object.section_id, "pjt":event_object.project_id, "start":convertDatumTime(event_object.start_date), "stop":convertDatumTime(event_object.end_date), "action":"delete"}
					}).done(function( msg ) {
					  alert( "Event deleted");
					});
		    return true;
		});
		

		 scheduler.attachEvent("onEventChanged", function(event_id,event_object){
			 if(event_id!=null){
				 alert(event_object.hidden);
				 if (!event_object.text) {
						alert("Text must not be empty");
						return false;
					}
					console.log(event_object.text.length+"  "+event_object.text+"  id : "+event_id);
					if (event_object.text.length<5) {
						alert("Text too small");
						return false;
					}
					else{
					$.ajax({
						  type: "POST",
						  url: "/eventmanager",
						  data: {"idDb":event_object.hidden,"desc":event_object.text, "sect":event_object.section_id, "pjt":event_object.project_id, "start":convertDatumTime(event_object.start_date), "stop":convertDatumTime(event_object.end_date), "action":"update"}
						}).done(function( msg ) {
						  alert("Event updated");
						});
					return true;
					}
			 }
			 else{return true;}
  		 })
		
		scheduler.attachEvent("onEventSave",function(id,data,is_new_event){
			if(is_new_event!=null){
				if (!data.text) {
					alert("Text must not be empty");
					return false;
				}
				console.log(data.text.length+"  "+data.text+"   "+is_new_event+"    "+id);
				if (data.text.length<5) {
					alert("Text too small");
					return false;
				}
				else{
				$.ajax({
					  type: "POST",
					  url: "/eventmanager",
					  data: {"desc":data.text, "sect":data.section_id, "pjt":data.project_id, "start":convertDatumTime(data.start_date), "stop":convertDatumTime(data.end_date), "action":"save"}
					}).done(function( msg ) {
					  alert("Event saved");
					});
				return true;
				}
			}
			else{return true;}
		})
		function convertDatumTime(datum){
			var retour='';
			retour+=datum.getFullYear()+'-';
			
			if((datum.getMonth()+1)<10)retour +='0'+(datum.getMonth()+1);
			else retour +=(datum.getMonth()+1);
			
			retour+='-';
			
			if(datum.getDate()<10)retour +='0'+datum.getDate();
			else retour +=datum.getDate();
			
			retour+=' ';
			if(datum.getHours()<10)retour +='0'+datum.getHours();
			else retour +=datum.getHours();
			retour += ':';
			if(datum.getMinutes()<10) retour +='0'+datum.getMinutes();
			else retour +=datum.getMinutes();
			retour += ':';
			if(datum.getSeconds()<10)retour +='0'+datum.getSeconds();
			else retour +=datum.getSeconds();
			
			return retour;	
		}

	</script>
</body>
<!-- var dp = new dataProcessor("/testsave");
dp.init(scheduler); --> 